/*
 * @Author: zeki mini
 * @Date: 2021-04-14 15:13:54
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-04-14 15:31:08
 * @Description: 首页列表表头
 */

import React, { Component } from 'react';
import { StyleSheet, Image, TouchableOpacity, View, Text } from 'react-native';
import { px2dp } from '@/styles';
import { iconRightGray } from '@/images';

export default class mainListHeader extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  static defaultProps = {
    onClickAction: () => {},
  };

  render() {
    const { onClickAction } = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.lineView} />
        <Text style={styles.textStyle}>保险头条</Text>
        <View style={{ flex: 1, justifyContent: 'center' }}>
          <TouchableOpacity style={styles.button} onPress={() => { onClickAction && onClickAction(); }}>
            <Text style={styles.more}>更多</Text>
            <Image style={styles.rightArrowIcon} source={iconRightGray} />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    paddingBottom: px2dp(20 * 2),
    flexDirection: 'row',
    height: px2dp(45 * 2),
    alignItems: 'center',
  },
  lineView: {
    width: px2dp(3 * 2),
    backgroundColor: '#EF9730',
    height: px2dp(40),
    marginLeft: px2dp(16 * 2),
    marginRight: px2dp(5 * 2)
  },
  textStyle: {
    fontSize: px2dp(18 * 2),
    fontWeight: 'bold',
    color: '#343332'
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingRight: px2dp(16 * 2),
  },
  more: {
    color: '#999793',
    fontSize: px2dp(24)
  },
  rightArrowIcon: {
    width: px2dp(22),
    height: px2dp(22),
    marginLeft: px2dp(8)
  }
});
